<template>
  <div class="container">
    <div>
      <div class="tit">核酸预约</div>
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
        label-position="top"
      >
        <el-form-item label="姓名" prop="field101">
          <el-input v-model="formData.field101" placeholder="请输入姓名">
          </el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="field103">
          <el-input
            v-model="formData.field103"
            placeholder="请输入身份证"
            :maxlength="18"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入电话号码"
            :maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前是否有新冠肺炎相关症状" prop="field105">
          <el-radio-group v-model="formData.field105" size="medium">
            <el-radio
              v-for="(item, index) in field105Options"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前体温" prop="field106">
          <el-radio-group v-model="formData.field106" size="medium">
            <el-radio
              v-for="(item, index) in field106Options"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        icon="el-icon-check"
        size="medium"
        @click="next('elForm')"
      >
        下一步
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    let checkPhone = (rule, value, callback) => {
      var phone = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!phone.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    let checkName = (rule, value, callback) => {
      var name =
        /^[a-zA-Z\u4E00-\u9FA5\uF900-\uFA2D\u00B7\u2022\u0095\u0387]+$/;
      if (value === "") {
        callback(new Error("请输入姓名"));
      } else if (!name.test(value)) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    let checkIdCard = (rule, value, callback) => {
      var idcardReg =
        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (value === "") {
        callback(new Error("请输入身份证"));
      } else if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        field101: '',
        field103: '',
        field105: 2,
        field106: 1,
        phone: "",
      },
      rules: {
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        field101: [{ required: true, validator: checkName, trigger: "blur" }],
        field103: [{ required: true, validator: checkIdCard, trigger: "blur" }],
        field105: [
          {
            required: true,
            message: "当前是否有新冠肺炎相关症状不能为空",
            trigger: "change",
          },
        ],
        field106: [
          {
            required: true,
            message: "当前体温不能为空",
            trigger: "change",
          },
        ],
      },
      field105Options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      field106Options: [
        {
          label: "正常（小于37.3℃）",
          value: 1,
        },
        {
          label: "发烧（大于等于37.3℃）",
          value: 2,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    next(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = `name=${this.formData.field101}&phone=${this.formData.phone}&id_card=${this.formData.field103}`
          this.axios.post('http://localhost:3000/hsyy',params)
          this.formData.field101 = "";
          this.formData.field103 = "";
          this.formData.phone = "";
          this.$router.push("/success");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tit {
  width: 960;
  margin: auto;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}
.container {
  width: 960px;
  margin: 50px auto;
}
.el-input {
  width: 200px;
}
</style>
